<html>
<head>
    <base href="<=basePath>">

    <title>登陆小米账号</title>

    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
    <script src="/js/jquery.js"></script>

    <script type="text/javascript">
        //视频消失时间
        setTimeout(function () {
            document.getElementById("video").style.display = "none";
        }, 80000);
    </script>

    <style type="text/css">
        input:focus {
            border: 2px solid #FF7E00;
        }

        hr {
            border: 1px solid #EDEDED;
        }

        /* 顶部菜单导航栏 */
        #topbar {
            background-color: #3B3B3B;
            width: 1890px;
            height: 40px;
        }

        .sep {
            color: #3B3B3B
        }

        #topbar a {
            text-decoration: none;
            color: #BDBDBD;
            font-family: 黑体;
            font-size: 14px;
        }

        #topbar a:hover {
            color: white;
        }

        #topbar_left {
            width: 700px;
            margin-left: 350px;
            padding-top: 10px;
            float: left;
        }

        #topbar_right {
            width: 400px;
            margin-left: 1300px;
            padding-top: 10px;
        }

        #menu {
            background-color: white;
            height: 95px;
        }

        #logo {
            margin-left: 350px;
            padding-top: 20px;
            float: left;
        }

        #menu_nav {
            margin-left: 100px;
            padding-top: 40px;
            width: 800px;
            float: left;
        }

        #menu_nav a {
            text-decoration: none;
            color: black;
            font-family: 黑体;
            font-size: 16px;
        }

        #menu_nav a:hover {
            color: #FF7E00;
        }

        #search {
            margin-left: 1300px;
            width: 300px;
            padding-top: 30px;
        }

        #searchinput {
            width: 200px;
            height: 40px;
            font-size: 16px;
            border: 1px solid #EDEDED;
        }

        #searchbtn {
            background-color: white;
            width: 60px;
            height: 40px;
            border: 1px solid #EDEDED;
            cursor: pointer;
            font-size: 16px;
            font-family: 黑体;
        }

        /* 登陆部分 */
        .logininput {
            width: 250px;
            height: 40px;
            font-size: 16px;
            border: 1px solid #EDEDED;
        }

        #loginbtn {
            background-color: #FF7E00;
            width: 250px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #EDEDED;
            cursor: pointer;
            font-size: 16px;
            font-family: 黑体;
        }

        #login {
            text-align: center;
            background-color: white;
            width: 510px;
            height: 600px;
            margin-left: 1210px;
            margin-top: 182px;
        }

        #loginlogo {
            width: 55px;
            margin: 0px auto;
        }

        #login_title {
            width: 200px;
            margin: 0px auto;
            font-family: 黑体;
        }

        #login_form {
            margin: 0px auto;
            width: 300px;
            height: 300px;
        }

        #xy {
            width: 450px;
            margin: 0px auto;
            color: gray;
        }

        #video {
            position: absolute;
            left: 160px;
            top: 230px;
        }
    </style>
</head>

<body style="background-image:url(image/login.jpg); background-color:#EDEDED ;font-family: 黑体;">
<div id="app">
    <!-- 顶部菜单导航栏 -->
    <div id="header">
        <div id="topbar">
            <div id="topbar_left">
                <a href="/prod/show5.action">小米商城</a><span class="sep">|</span>
                <a href="" target="_blank">MIUI</a><span class="sep">|</span>
                <a href="" target="_blank">米聊</a><span class="sep">|</span>
                <a href="" target="_blank">游戏</a><span class="sep">|</span>
                <a href="" target="_blank">多看阅读</a><span class="sep">|</span>
                <a href="" target="_blank">云服务</a><span class="sep">|</span>
                <a href="" target="_blank">金融</a><span class="sep">|</span>
                <a href="" target="_blank">米币</a><span class="sep">|</span>
                <a href="" target="_blank">手机版</a><span class="sep">|</span>
                <a href="" target="_blank">问题反馈</a>
            </div>
            <div id="topbar_right">
                <a href="login.jsp">登陆</a>
                <span class="sep">|</span>
                <a href="">${user.uname}</a>
                <span class="sep">|</span>
                <a href="/fore/logout.action">注销</a>
                <span class="sep">|</span>
                <a href="/fore/showOrder.action" target="_blank">我的订单</a>
                <span class="sep">|</span>
                <a href="/fore/showCarShop.action" target="_blank">购物车</a>
                <span class="sep">|</span>
                <a href="register.jsp" target="_blank">注册</a><span class="sep">|</span>
            </div>
        </div>
    </div>

    <!-- 登陆部分 -->
    <div id="login">
        <div id="loginlogo">
            <img alt="" src="/image/milogo.jpg">
        </div>
        <br> <br>
        <div id="login_title">
            <h1>登陆小米账号</h1>
        </div>
        <div id="login_form">
            <form action="#" method="get">
                姓名<br>
                <input type="text" id="uname" name="uname" v-model="uname" class="logininput"
                       onmouseover="this.style.borderColor='#FF7E00';"
                       onmouseout="this.style.borderColor='#EDEDED';"/> <br> <br>
                密码<br>
                <input type="password" id="upass" name="upass" class="logininput"
                       v-model="upass" onmouseover="this.style.borderColor='#FF7E00';"
                       onmouseout="this.style.borderColor='#EDEDED';"/> <br> <br>
                验证码<img alt="" src="/code" id="yzmImg" @click="changeYzm()">
                <br>
                <input type="text" id="yzm" name="yzm" class="logininput" v-model="code"
                       onmouseover="this.style.borderColor='#FF7E00';"
                       onmouseout="this.style.borderColor='#EDEDED';"/> <br> <br>
                <input type="button" id="loginbtn" value="立即登陆"
                       @click="login()"
                       onmouseover="this.style.color='white';"
                       onmouseout="this.style.color='black';"> <br>
                <p id="errormsg" style="color: red;">${msg}</p>
            </form>
        </div>
        <br><br>
        <div id="xy">一定要牢记帐号密码！因为我还没做忘记密码功能......</div>
    </div>

    <div id="video">
        <object id="NSPlay" width=1065 height=600
                classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase=""
                standby="Loading Microsoft Windows Media Player components..."
                type="application/x-oleobject" align="left" hspace="0">
            <param name="AutoRewind" value=1>
            <param name="FileName" value="D:\xmNote3_2.mp4">
            <param name="ShowControls" value="0">
            <param name="ShowPositionControls" value="0">
            <param name="ShowAudioControls" value="0">
            <param name="ShowTracker" value="0">
            <param name="ShowDisplay" value="0">
            <param name="ShowStatusBar" value="0">
            <param name="ShowGotoBar" value="0">
            <param name="ShowCaptioning" value="0">
            <param name="AutoStart" value=1>
            <param name="Volume" value="-2000">
            <param name="AnimationAtStart" value="0">
            <param name="TransparentAtStart" value="0">
            <param name="AllowChangeDisplaySize" value="0">
            <param name="AllowScan" value="0">
            <param name="EnableContextMenu" value="0">
            <param name="ClickToPlay" value="0">
        </object>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            uname: '',
            upass: '',
            code: ''
        },
        methods: {
            login: function () {
                axios({
                    method: "post",
                    url: "/login",
                    data: {
                        "uname": this.uname,
                        "upass": this.upass,
                        "code": this.code
                    }
                }).then((resp) => {
                    if (resp.data.code == 200) {
                        alert(resp.data.msg);
                        location.href = "/main.html";
                    } else {
                        alert(resp.data.msg);
                    }
                })
            },
            changeYzm: function () {
                //获取到image标签,修改src重新赋值/code即可
                document.getElementById("yzmImg").src = "/code?" + new Date();
            }
        }
    })
</script>
</body>
</html>
